<template>
  <div class="wrapper">
    <el-form
      label-width="80px"
      label-position="right"
      class="info_form"
      :model="ruleForm"
      :disabled="detailMode"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="账号类型" prop="type"> 个人客户 </el-form-item>
      <el-form-item label="账号" prop="user_name">
        <el-input
          v-model="ruleForm.user_name"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="nickname">
        <el-input
          v-model="ruleForm.nickname"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="mobile">
        <el-input
          v-model="ruleForm.mobile"
          placeholder="请输入联系方式"
        ></el-input>
      </el-form-item>
      <el-form-item label="所在城市" prop="area">
        <el-cascader
          popper-class="col"
          :options="areaData2"
          filterable
          clearable
          v-model="ruleForm.area"
          placeholder="请选择您所在的城市"
          :props="{
            value: 'id',
            label: 'name',
            children: 'next_level_data',
          }"
          @change="handleChangeArea"
        ></el-cascader>
      </el-form-item>
    </el-form>
    <div v-if="!detailMode" style="margin-top: 40px; text-align: center">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleOk">确定</el-button>
    </div>
    <div v-if="detailMode" style="margin-top: 40px; text-align: center">
      <el-button type="primary" @click="handleEdit">编辑</el-button>
    </div>
  </div>
</template>

<script>
import { regionList } from "@/page/material/common/common";

import {
  CustomerList,
  CustomerCreate,
  CustomerDetail,
  CustomerUpdate,
  CustomerDelete,
  getTransportsList,
  reqOrderFormData,
  getCustomerViewFreightAuthList,
  CustomerSubscription,
  reqWebsiteList,
  AdminBox,
  CustomerAccountModify,
} from "@/api/customer";
export default {
  name: "personCustomer",
  components: {},
  props: ["id", "mode", "user"],
  data() {
    return {
      ruleForm: {},
      rules: {
        user_name: [{ required: true, message: "请输入账号", trigger: "blur" }],
        nickname: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
        ],
        area: [{ required: true, message: "请选择所在城市", trigger: "blur" }],
      },
      clientList: [],
      areaData2: [], //二级地址库
    };
  },
  computed: {
    detailMode() {
      return this.mode === "detail";
    },
  },
  mounted() {
    regionList(0).then((res) => {
      const data = res.data;
      data.forEach((item) => {
        item.next_level_data.forEach((iten) => {
          iten.next_level_data = undefined;
        });
      });
      this.areaData2 = data;
    });
    CustomerDetail({ id: this.id }).then((res) => {
      // console.log(res);
      const data = res.data;
      data.parent_id = data.parent_id === 0 ? "" : data.parent_id;
      // this.ruleForm = data;
      const _ruleForm = {
        user_id: this.user.user_id + "",
        customer_id: this.user.type_id + "",
        user_name: this.user.username,
        nickname: this.user.nickname,
        mobile: this.user.mobile,
        customer_province_id: data.province_id,
        customer_city_id: data.city_id,
        area: [data.province_id, data.city_id],
      };
      this.ruleForm = _ruleForm;
    });
  },
  methods: {
    handleChangeArea(val) {
      if (val.length > 0) {
        this.ruleForm.customer_province_id = val[0];
        this.ruleForm.customer_city_id = val[1];
      } else {
        this.ruleForm.customer_province_id = "";
        this.ruleForm.customer_city_id = "";
      }
    },
    handleEdit() {
      this.$emit("modeChange", "edit");
    },
    handleOk() {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        const params = {
          ...this.ruleForm,
          customer_province_id: this.ruleForm.customer_province_id * 1,
          customer_city_id: this.ruleForm.customer_city_id * 1,
        };
        CustomerAccountModify(params).then((res) => {
          if (res.code === 10000) {
            this.$emit("ok");
          }
        });
      });
    },
    handleClose() {
      this.$emit("cancel");
      this.$emit("modeChange", "detail");
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  width: 350px;
  .info_form {
    /deep/.el-form-item__content .el-input {
      width: 200px;
    }
  }
}
</style>